<template>
    <van-nav-bar>
        <template #left>
            <router-link to="/register">注册</router-link>
        </template>
        
        <template #title>
            <router-link to="/search">搜索</router-link>
        </template>
        <template #right>
            <van-image v-if="accountStore.account.url" :src="accountStore.account.url" round type="contain" width="40px" height="40px" />
            <router-link v-else to="/login">登录</router-link>
        </template>

    </van-nav-bar>
</template>

<script setup lang="ts">
import { useAccountStore } from '@/stores/user'
const accountStore = useAccountStore()
console.log('url ',accountStore.account.url);

</script>

<style scoped lang="scss">
.van-nav-bar{
    background-color: #d30607;

    .van-nav-bar__left,.van-nav-bar__right{
        a{
            color: white;
            font-weight: bold;
        }
    }
    //样式穿透
    :deep(.van-nav-bar__title){
        background-color: white;
        width: 80%;
        border-radius: 30px;
        height: 35px;
        line-height: 35px;
        box-sizing: border-box;
        text-align: left;
        padding-left: 30px;
        font-size: 14px;
        a{
            color: gray;
        }
    }
}
</style>